<template>
  <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="$route.path" class="el-menu-vertical" :collapse="Collapse" router>
    <div v-for="item in menu" :key="item.name">
      <el-submenu v-if="item.children" :index="item.path">
        <template slot="title">
          <i :class="item.meta.icon"></i>
          <span slot="title">{{ Collapse ? "" : item.meta.title }}</span>
        </template>
        <el-submenu v-for="it in item.children" :key="it.name" :index="it.name">
          <template #title> {{ it.meta.title }}</template>
          <el-menu-item v-for="i in it.children" :key="i._id" :index="`${item.path}#${i._id}`">{{ i.title }}</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item v-else :index="item.path">
        <i :class="item.meta.icon"></i>
        <template #title>{{ item.meta.title }}</template>
      </el-menu-item>
    </div>
  </el-menu>
</template>

<script>
// import menu from "@/plugins/menu";
import { mapState } from "vuex";
export default {
  props: { Collapse: Boolean },

  computed: {
    ...mapState(["menu"]),
  },
  methods: {},
  created() {
    this.$store.commit("getMenu");
  },
};
</script>
<style lang="less">
.el-menu-vertical {
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  &:not(.el-menu--collapse) {
    width: 201px;
  }
}
</style>
